import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
function FunctionComponent() {
	const [number, setNumber] = React.useState(0);
	if (number === 0) {
		return (
			<ul onClick={() => setNumber(1)}>
				<li key="A" id='a'>A</li>
				<li key="B" id='b'>B</li>
				<li key="C" id='c'>C</li>
				<li key="D" id='d'>D</li>
				<li key="E" id='e'>E</li>
				<li key="F" id='f'>F</li>
			</ul>
		)
	}
	//更新后只有一个节点
	return (
		<ul>
			<li key="A" id='a2'>A2</li>
			<li key="C" id='c2'>C2</li>
			<li key="E" id='e2'>E2</li>
			<li key="B" id='b'>B</li>
			<li key="G" id='g'>G</li>
			<li key="D" id='d2'>D2</li>
		</ul>
	);
}
root.render(<FunctionComponent />);